<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <!--<el-input v-model="select_word" placeholder="搜索关键字" class="handle-input mr10"></el-input>-->
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" @click="add" style="float: right;"><i class="el-icon-lx-roundadd"></i> 添加产品</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="order_time" label="时间" width="150"></el-table-column>
                <el-table-column prop="order_bank_no" label="银行订单号" width="170"></el-table-column>
                <el-table-column prop="total_price" label="总价"></el-table-column>
                <el-table-column prop="user_name" label="下单人"></el-table-column>
                <el-table-column prop="user_mobile" label="电话号码"></el-table-column>
                <el-table-column label="支付状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.pay_status=='1'?'success':'info'">{{scope.row.pay_status=='0'?'待支付':'已支付'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否发货">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.is_send_out=='1'?'success':'info'">{{scope.row.is_send_out=='0'?'否':'是'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template slot-scope="scope">
                        <!--<el-button type="text" icon="el-icon-edit" class="green" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                        <el-button type="text" icon="el-icon-success" class="red" @click="handleDelete(scope.$index, scope.row)">发货</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="管理员" :visible.sync="editVisible" width="50%">
            <productAdd v-if="editVisible" :uid="roleId,mobile,nickName" ref="managerAdd" @done="roleDone"></productAdd>
        </el-dialog>
        <!-- 充值/扣除弹出框 -->
        <el-dialog :title="rechargeTitle" :visible.sync="editVisible2" width="50%">
            <div class="container">
                <el-input type="number" v-model="payGold" placeholder="输入金币数" class="handle-input mr10" @blur="goldChange"></el-input>
                <el-button type="primary" @click="sureRechange">确认</el-button>
                <el-button @click="editVisible2=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import productAdd from '@/components/module2/product-add'
    import pub from '../../utils/pub'
    export default {
        components:{
            productAdd,
        },
        name: 'order',
        data() {
            return {
                type: '1',
                tableData: [],
                editVisible: false,

                editVisible2: false,
                rechargeTitle: '', // 充值/扣除金币标题
                rowId: '',
                rowType: '',
                payGold: '',

                roleId: '', // 管理员id

                onlineCount: 0,

                pageSize: 0,
                totalRow: 0,
                currentPage1: 0,
            }
        },
        computed: {
            data() {
            }
        },
        filters:{
            getCurrentTime(value){
                return pub.getCurrentTime(value);
            },
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 获取列表数据
            getData(pageNumber) {
                this.config.post('/admin/order/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage1 = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                }).catch(err=>{
                    this.$message.error('网络错误');
                    this.$router.push('/login');
                })
            },
            search() {
                this.getData('1');
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 启用禁用
            openClose(row){
                this.loadopen();
                this.config.post('/admin/product/changeStatus', {id: row.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 添加
            add(){
                this.editVisible = true;
                this.roleId = '';
                this.mobile = '';
                this.nickName = '';
                setTimeout(()=>{
                    this.$refs.managerAdd.getInfo();
                }, 200);
            },
            //  充值金币/扣除金币
            recharge(row, str){
                this.editVisible2 = true;
                this.rechargeTitle = str==='1'?'充值金币':'扣除金币';
                this.rowId = row.id;
                this.rowType = str;
                this.payGold = '';
            },
            sureRechange(){
                this.loadopen();
                this.config.post('/center/user/changeGold', {
                    id: this.rowId,
                    type: this.rowType,
                    gold: this.payGold,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.status===1){
                        this.editVisible2 = false;
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            },
            goldChange(){
                this.payGold = (this.payGold*1).toFixed(0);
            },
            // 编辑
            handleEdit(index, row) {
                this.editVisible = true;
                this.roleId = row.id;
                this.mobile = row.mobile;
                this.nickName = row.nickName;
                setTimeout(()=>{
                    this.$refs.managerAdd.getInfo();
                }, 200);
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('确定发货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/order/sendOut', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 重置密码
            resetPwd(index, row){
                this.$confirm('确定重置该用户密码?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/center/user/reset', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.status===1){
                            this.$message.success(res.data.message);
                            this.getData('1');
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 添加/编辑完成（子组件调用此方法）
            roleDone(str) {
                this.editVisible = false;
                this.getData();
            },
            // 保存编辑
            saveEdit() {
            },
        },
        mounted(){
            this.getData();
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }

    /*统计卡片*/
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }
</style>
